import React from 'react';
import { Descriptions, Modal, Tag } from 'antd';
import type { DescriptionsProps } from 'antd';



const ArticleDetail: React.FC = ({isArticleDetailModalOpen,onEvent,articleDetail}) => {

  const items: DescriptionsProps['items'] = [
    {
      key: '1',
      label: '序号',
      children: articleDetail[0]?.id,
    },
    {
      key: '2',
      label: "作者",
      children: articleDetail[0]?.author,
    },
    {
      key: '3',
      label: '板块',
      children: articleDetail[0]?.region,
    },
    {
      key: '4',
      label: "状态",
      children: <Tag color={articleDetail[0]?.status ? 'green' : "volcano"} key={articleDetail[0]?.status}>
          {articleDetail[0]?.status ? '发布' : '未发布'}
        </Tag>
    },
    {
      key: '5',
      label: '标题',
      children: articleDetail[0]?.title,
    },
  ];


  return (
    <Modal
      open={isArticleDetailModalOpen}
      width={1200}
      footer={null}
      onCancel={onEvent}
    >
      <Descriptions title="文章详情" items={items} />
      {/* 正常渲染标签字符串在页面中 */}
      <div 
      style={{
        border: '1px solid #ccc',
        margin: '20px 0',
        padding: '20px',
      }} 
      dangerouslySetInnerHTML={{ __html: articleDetail[0]?.content }}
      ></div>
    </Modal>
    
  )
}

export default ArticleDetail;